{layout name="common/layout" /}

<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<style>
    .main_area{
        width:100%;
        height:100%;
        position: relative;
        bottom:0;
        overflow: auto;
    }
    .post_form{
        box-sizing:unset;
        padding: 15px 50px;
        margin: -10px auto;
    }
    .red_must{
        color: red;
        padding-right: 5px;
    }
    .sub_title{
        position: relative;
        float: left;
        width: 120px;
    }
    .editer{
        margin-left: 0px;
    }
    .sub_body{

    }
    /*按钮*/
    .btn_area{
        width: 45%;
        position: relative;
        margin: 40px auto;
    }
    input {
        font-size: 14px;
        color: #222;
        margin: -5px 0 0 10px;
        outline: none;
        border: none;
    }
</style>

<div class="Hui-article-box">
    <div class="Hui-article" style="top:0px;">
        <h3 class="showlist_title">活动>添加活动</h3>

    <div class="main_area">
        <div style="position: relative;width:100%;">
            <div class="lab cl">
                <div class="lab-l">
                    <span class="span"><label class="red_must">*</label>类型</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input name="type" type="radio" style="margin-left: 0px;"  value="1" checked/>营销活动
                    <!--<input name="type" type="radio" style="margin:0 0 0 20px;display:none;"  value="2" />推广活动-->
                </div>
            </div>
            <div class="lab cl">
                <div class="lab-l">
                    <span class="span"><label class="red_must">*</label>标题</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input name="act_name" type="text" class="input-text radius size-M  editer activity_title"  value="" />
                </div>
            </div>
            <div class="lab cl market_rate">
                <div class="lab-l">
                    <span class="span"><label class="red_must">*</label>折扣</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input name="market_rate" type="text" class="input-text radius size-M  editer " onkeyup="clearNoNumAndPoint(this)" style="width:80px;"   value="" />&nbsp;&nbsp;% (范围0%-100%)
                </div>
            </div>
            <div class="lab cl">
                <div class="lab-l">
                    <span class="span"><label class="red_must">*</label>活动开始时间</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input name="activity_start_time" type="text" class="input-text radius size-M  editer Wdate activity_start_time" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'});" value="" />
                </div>
            </div>
            <div class="lab cl">
                <div class="lab-l">
                    <span class="span"><label class="red_must">*</label>活动结束时间</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input name="activity_end_time" type="text" class="input-text radius size-M  editer Wdate activity_end_time" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'});"  value="" />
                </div>
            </div>
            <div class="lab cl">
                <div class="lab-l">
                    <span class="span"><label class="red_must">&nbsp;</label>活动页面链接</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input name="link_url" type="text" class="input-text radius size-M  editer link_url" placeholder="例如www.example.com/show/活动" value="" />
                </div>
            </div>
            <div class="lab cl">
                <div class="lab-l">
                    <span class="span"><label class="red_must">*</label>状态</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input name="status" class="status_able" type="radio" style="margin-left: 0px;"  value="1" checked/>有效
                    <!--<input name="status" type="radio" style="margin:0 0 0 20px;"  value="2" />失效-->
                </div>
            </div>
            <div class="lab cl">
                <div class="lab-l">
                    <span class="span"><label class="red_must">&nbsp;</label>活动商品</span>
                </div>
                <div class="lab-r" style="border:0;margin-top: 10px;">
                    <input type="submit" id="show-area" class="btn add_goods" style="margin-left: 0px;" value="选择商品"/>
                    <div style="margin-top: 10px;"><label>(注:同一商品只能参加一个活动，添加成功后默认取消其他活动)</label></div>
                    <div class="sel_goods_show" style="width:400px;height:200px;display: none;overflow:auto;margin-top: 20px; ">
                        <ul class="sel_goods_area">

                        </ul>
                    </div>
                </div>
            </div>
            <div id="modal-demo"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content radius" style="width: 900px;">
                        <div class="modal-header">
                            <h3 class="modal-title" style="text-align: center;">选择活动商品</h3>
                            <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
                        </div>
                        <div class="modal-body">
                            <table class="goods_tab">
                                {foreach($goodslist as $k => $v)}
                                <tr>
                                    <td>
                                        <div>
                                            <input type="checkbox" class="goods_item" style="width:20px;height: 20px; " value="{$v['goods_id']}" goods-name="{$v['goods_name']}"  goods-image="{$v['goods_main_pic']}"/>
                                            <img src="{$v['goods_main_pic']}" style="width:60px;height:60px;"/>
                                            <label>{$v['goods_name']}</label>
                                        </div>
                                    </td>
                                </tr>
                                {/foreach}
                            </table>
                        </div>
                        <div class="modal-footer">
                            <span class="page_bat" style="margin-right: 20px;"></span>
                            <span class="btn previousPage">上一页</span>
                            <span class="btn nextPage">下一页</span>
                            <span class="btn select_all">全选</span>
                            <span class="btn check_btn">确定</span>
                            <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <div  class="div-box btn_area">
                <input type="submit" class="btn add_btn" style="margin-left: 30px;" value="添加"/>
                <input type="button" class="btn close_btn" style="margin-left: 30px;" value="取消"/>
            </div>
        </div>
    </div>

    </div>
</div>
<script type="text/javascript">
    var page = 1;
    var total_page = "{$total_page}";
    $(".page_bat").html(page+"/"+total_page);
    var goods_list = new Array();
    $(function(){
        //活动类型与折扣的联动
        var activitytype = $("input[name='type']").val();
        if(activitytype == 1){
            $("input[name='type']").eq(0).prop("checked","checked");
            $(".market_rate").show();
        }else{
            $("input[name='type']").eq(1).prop("checked","checked");
            $(".market_rate").hide();
        }
        //绑定活动商品相关
        $("#show-area").on('click', function(){
            $("#modal-demo").modal("show");
        });
        //全选当前页面
        $(".select_all").click(function (){
            $(".goods_item").each(function(){
                $(this).prop("checked","checked");
                if($(this).prop("checked") == true){
                    var exist = $.inArray(parseInt($(this).val()),goods_list);
                    if(exist == -1){
                        goods_list.push(parseInt($(this).val()));
                    }
                }else{
                    goods_list.pop(parseInt($(this).val()));
                }
            })
        });
        //上一页
        $(".previousPage").click(function (){
            if(page == 1){
                layer.msg("已经是第一页");
                return false;
            }
            page = page-1;
            $.post("{:url('activity/addActivity')}",{page:page},function(data){
                if(data.status == 1){
                    var gdata = data.data;
                    var gtab = $(".goods_tab");
                    gtab.empty();
                    for(i=0;i<gdata.length;i++){
                        var label = $.inArray(gdata[i]['goods_id'],goods_list);
                        if(label == -1){
                            gtab.append("<tr style='margin-top:10px;'><td><div><input type='checkbox' class='goods_item' style='width:20px;height: 20px; ' value='"+gdata[i]['goods_id']+"' goods-name='"+gdata[i]['goods_name']+"'  goods-image='"+gdata[i]['goods_main_pic']+"'/>"
                                +"<img src='"+gdata[i]['goods_main_pic']+"' style='width:60px;height:60px;'/>"
                                +"<label>"+gdata[i]['goods_name']+"</label></div></td></tr>");
                        }else{
                            gtab.append("<tr style='margin-top:10px;'><td><div><input type='checkbox' class='goods_item' checked style='width:20px;height: 20px; ' value='"+gdata[i]['goods_id']+"' goods-name='"+gdata[i]['goods_name']+"'  goods-image='"+gdata[i]['goods_main_pic']+"'/>"
                                +"<img src='"+gdata[i]['goods_main_pic']+"' style='width:60px;height:60px;'/>"
                                +"<label>"+gdata[i]['goods_name']+"</label></div></td></tr>");
                        }
                    }
                }
            },'json');
            $(".page_bat").html(page+"/"+total_page);
        });
        //下一页
        $(".nextPage").click(function (){
            page = page+1;
            $.post("{:url('activity/addActivity')}",{page:page},function(data){
                if(data.status == 1){
                    var gdata = data.data;
                    var gtab = $(".goods_tab");
                    gtab.empty();
                    for(i=0;i<gdata.length;i++){
                        var label = $.inArray(gdata[i]['goods_id'],goods_list);
                        if(label == -1){
                            gtab.append("<tr style='margin-top:10px;'><td><div><input type='checkbox' class='goods_item' style='width:20px;height: 20px; ' value='"+gdata[i]['goods_id']+"' goods-name='"+gdata[i]['goods_name']+"'  goods-image='"+gdata[i]['goods_main_pic']+"'/>"
                                +"<img src='"+gdata[i]['goods_main_pic']+"' style='width:60px;height:60px;'/>"
                                +"<label>"+gdata[i]['goods_name']+"</label></div></td></tr>");
                        }else{
                            gtab.append("<tr style='margin-top:10px;'><td><div><input type='checkbox' class='goods_item' checked style='width:20px;height: 20px; ' value='"+gdata[i]['goods_id']+"' goods-name='"+gdata[i]['goods_name']+"'  goods-image='"+gdata[i]['goods_main_pic']+"'/>"
                                +"<img src='"+gdata[i]['goods_main_pic']+"' style='width:60px;height:60px;'/>"
                                +"<label>"+gdata[i]['goods_name']+"</label></div></td></tr>");
                        }
                    }
                    $(".page_bat").html(page+"/"+total_page);
                }else{
                    page = page-1;
                    $(".page_bat").html(page+"/"+total_page);
                }
            },'json');
        });

        $("body").on("click","input[type='checkbox'].goods_item",function(){
            if($(this).prop("checked") == true){
                goods_list.push(parseInt($(this).val()));
            }else{
                goods_list.pop(parseInt($(this).val()));
            }
        });

        $(".check_btn").click(function (){
            $(".sel_goods_area").empty();
            if(goods_list.length > 0){
                $(".sel_goods_show").show();
            }else{
                $(".sel_goods_show").hide();
            }
            if(goods_list.length == 0){
                $("#modal-demo").modal("hide");
                return false;
            }
            var pdata = goods_list.join(",");
            $.post("{:url('activity/getSelectGoods')}",{data:pdata},function(data){
                if(data.status == 1){
                    var agdata = data.data;
                    for(i=0;i<agdata.length;i++){
                        $(".sel_goods_area").append(
                            "<li><img src='"+agdata[i]['goods_main_pic']+"' style='width:40px;height:40px;margin-right: 10px;'/ >"+agdata[i]['goods_name']+"</li>"
                        );
                    }
                }
            },'json');
            //goods_list.splice(0,goods_list.length);
            $("#modal-demo").modal("hide");
        });

    });

    //红包优惠券与限制的联动
    $("input[name='type']").click(function(){
        if($(this).val() == 1){
            $("input[name='type']").eq(0).prop("checked","checked");
            $(".market_rate").show();
        }else{
            $("input[name='type']").eq(1).prop("checked","checked");
            $(".market_rate").hide();
        }
    });

    /**
     * 数据规范化函数只能是数字
     */
    function clearNoNumAndPoint(obj){
        obj.value = obj.value.replace(/[^\d]/g,"");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        if(obj.value.indexOf(".")< 0 && obj.value !=""){
            //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value= parseFloat(obj.value);
        }
    }

    /**
     * 数据规范化函数只能是最多两位小数的数字
     */
    function clearNoNum(obj){
        obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
        if(obj.value.indexOf(".")< 0 && obj.value !=""){
            //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value= parseFloat(obj.value);
        }
    }

    /**
     * 数据提交
     */
    $(".add_btn").click(function(){
        var title = $(".activity_title").val();
        if(title == ""){
            layer.msg("标题必填");
            return false;
        }
        var activity_start_time = $(".activity_start_time").val();
        if(activity_start_time == ""){
            layer.msg("发放开始时间必填");
            return false;
        }
        var activity_end_time = $(".activity_end_time").val();
        if(activity_end_time == ""){
            layer.msg("发放结束时间必填");
            return false;
        }
        var link_url = $(".link_url").val();
        //if(link_url == ""){
        //    layer.msg("活动页面链接必填");
        //    return false;
        //}
        var data = {
            type : parseInt($("input[name='type']:checked").val()),
            act_name : title,
            start_time : activity_start_time,
            end_time : activity_end_time,
            link_url:link_url,
            store_name : "{$storeinfo['store_name']}",
            status : parseInt($("input[name='status']:checked").val()),
        }
        if(parseInt($("input[name='type']:checked").val()) == 1){
            var market_rate = parseInt($("input[name='market_rate']").val());
            if(isNaN(market_rate) || market_rate == 0 || market_rate > 99){
                layer.msg("折扣必填，且必须在指定数值内");
                return false;
            }
            data.market_rate = market_rate;
        }else{
            data.market_rate = 0;
        }
        if(goods_list.length>0){
            data.goods_list=goods_list;
        }else{
            data.goods_list=0;
        }

        $.post("{:url('activity/createActivity')}",{data:data},function(data){
            if(data.status == 1){
                layer.msg(data.msg);
                window.location.href ="{:url('activity/listActivity')}";
            }else{
                layer.msg(data.msg);
            }
        },'json');
    });

    $(".close_btn").click(function(){
        window.location.href ="{:url('activity/listActivity')}";
    });
</script>